<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">

    <div class="demo-section">
        <div id="background">
            <div class="column">
                <h3 class="title">Select Wall Paint</h3>
                <div id="palette"></div>
            </div>

            <div class="column">
                <h3 class="title">Choose Custom Color</h3>
                <input id="picker" />
            </div>
        </div>
    </div>

    <script>
        function preview(e) {
            $("#background").css("background-color", e.value);
        }

        $("#palette").kendoColorPalette({
            columns: 4,
            tileSize: {
                width: 34,
                height: 19
            },
            palette: [
                "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
                "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
                "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
            ],
            change: preview
        });

        $("#picker").kendoColorPicker({
            value: "#ffffff",
            buttons: false,
            select: preview
        });
    </script>

    <style scoped>

        .demo-section {
            width: 600px;
            height: 600px;
        }

        #background {
            background-image: url(../../content/web/colorpicker/interior-bg.png);
            background-color: transparent;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .column {
            margin-top: 384px;
            float: left;
            width: 300px;
            text-align: center;
        }

        .column .title {
            color: #a3a3a3;
            text-transform: uppercase;
            font-size: 11px;
            font-weight: normal;
            padding: 41px 0 20px;
        }

        #palette {
            vertical-align: top;
            display: inline-block;
        }

        .k-colorpicker {
            vertical-align: top;
            margin: 20px 0;
        }
    </style>
</div>

	
			
</body>
</html>
